<template>
	<view class="warp">
		<view class="bg">
			<uni-nav-bar background-color="rgba(0,0,0,0)"
			 color="#797979" :border="false" :fixed="true"
			  @clickLeft="left"  left-icon="left" 
			   leftWidth="50rpx" rightWidth="10rpx" 
			   :statusBar="true"  
			   >
			   <view class="title_box">
			 	 <view class="left">
					<view class="left_text">
						我的小星星
					</view>
				</view>
			 	<view class="right" @click="torule">
					<uni-icons color="#797979" fontFamily="CustomFont" :size="26">{{'\ue669'}}</uni-icons>
			 	</view>
			   </view>
			</uni-nav-bar>
			<view class="star_number">
				<view class="left">
					<uni-icons color="#fccf3e" type="star-filled" size="30"></uni-icons>
					<span style="font-size: 50rpx;padding-top: 8rpx;padding-left: 16rpx;">{{starnumber}}</span>
				</view>
				<view class="right" @click="tostarsrecord">
					<span>获取 / 消耗记录</span>
					<uni-icons   color="#cecece" type="right" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="cont_box">
			<view class="tab_list">
				<view @click="changetab(index)" :class="tabIndex==index?'active':'item'" v-for="(item,index) in tabtitlelist" :key="index">
					<view class="">
						{{item.name}}
					</view>
					<view class="b_line">
						
					</view>
				</view>
			</view>
		</view>
		<swiper 
		:current="tabIndex"
		duration="300"
		class="swiper_box"
		@change="changsw"
		>
			<swiper-item v-for="(item,index) in 3" :key="index">
				<scroll-view  scroll-y class="list-scroll-content">
				<template>
					<view class="tab_cont_box">
					 <view class="">
					 	暂时还没有内容哦
					 </view>
				</view>
				</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 登录提示框 -->
		<loginPop ref="loginPop"  ></loginPop>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				tabtitlelist:[{name:'小星星活动'},{name:'小星星商城'},{name:'获取小星星'}],
				tabIndex:0,
				starnumber:0
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		onLoad() {
			this.getsignnumber()
		},
		
		methods:{
			getsignnumber(){
			 if(!this.hasLogin){
			 this.$nextTick(() => {
			 					  // DOM已更新，现在可以安全地使用 this.$refs  
			 					  this.$refs.loginPop.openLogin()
			 					});
			 }else{
				this.$request({
					url:'v3/sign/front/detail',
					method:'GET'
				}).then(res=>{
					if(res.state==200){
						this.starnumber=res.data.integral
					}
				}) 
			 }
					
				
				
			},
			tostarsrecord(){
				uni.navigateTo({
					url:"/pages/moreModule/starrecord/starrecord"
				})
			},
			torule(){
				
			uni.navigateTo({
				url:"/pages/moreModule/starrule/starrule"
			})
			},
			changetab(idx){
				this.tabIndex=idx
			},
			changsw(e){
				this.tabIndex=e.detail.current
				
			},
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
.warp{
	 
	.bg{
		background: url(../../../static/images/qiandao.png) ;
		background-size: cover;
		height: 400rpx;
		position: relative;
		.title_box{
			padding: 0 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				align-items: center;
				.left_text{
					font-size: 30rpx !important;
					margin-right: 10rpx;
					
				}
				.left_icon{
					width: 30rpx;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					border: 2rpx solid #323333;
					border-radius: 50%;
					
				}
				
			}
		}
		.star_number{
			width: 100%;
			position: absolute;
			bottom: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.right{
				display: flex;
				justify-content: space-between;
				align-items: center;
				 font-size: 28rpx;
				 color: #7c7e7e;
			}
		}
	}
	.cont_box{
		padding: 20rpx;
		background-color: #fff;
		.tab_list{
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
			.item{
				color: #7c7e7e;
				font-size: 28rpx;
			}
			.active{
				color: #232323;
				font-size: 30rpx;
				 
				.b_line{
					margin-top: 6rpx;
					width: 100%;
					height: 6rpx;
					background-color: #73ddf9;
					border-radius: 3rpx;
				}
			}
		}
	}
	.swiper_box{
		  height: calc(100vh - 250px);
	}
	.list-scroll-content{
		height: 100%;
	}
	.tab_cont_box{
		padding: 10rpx 30rpx;
		text-align: center;
		// background-color: red;
		// height: 100vh;
	}
}
</style>
